<template>
  <div class="login-container">
    <div class="login-form">
      <h2>登录</h2>
      <el-form :model="loginForm" :rules="rules" ref="loginFormRef">
        <!-- 登录方式切换 -->
        <div class="login-type-switch">
          <el-radio-group v-model="loginType" size="large">
            <el-radio-button label="username">用户名登录</el-radio-button>
            <el-radio-button label="email">邮箱登录</el-radio-button>
          </el-radio-group>
        </div>
        
        <!-- 用户名/邮箱输入框 -->
        <el-form-item :label="loginType === 'username' ? '用户名' : '邮箱'" 
                      :prop="loginType === 'username' ? 'username' : 'email'">
          <el-input 
            v-model="loginForm[loginType]" 
            :placeholder="loginType === 'username' ? '请输入用户名' : '请输入邮箱'" 
            :prefix-icon="loginType === 'username' ? 'User' : 'DocumentCopy'" 
          />
        </el-form-item>
        
        <!-- 密码输入框 -->
        <el-form-item label="密码" prop="password">
          <el-input 
            v-model="loginForm.password" 
            type="password" 
            placeholder="请输入密码" 
            prefix-icon="Lock" 
            show-password 
            @input="checkPasswordStrength"
          />
        </el-form-item>
        
        <!-- 密码强度提示 -->
        <div v-if="passwordStrength > 0" class="password-strength">
          <div class="strength-label">密码强度：</div>
          <div class="strength-bars">
            <div 
              v-for="n in 3" 
              :key="n" 
              class="strength-bar" 
              :class="{
                'weak': n <= 1 && passwordStrength === 1,
                'medium': n <= 2 && passwordStrength === 2,
                'strong': n <= 3 && passwordStrength === 3
              }"
            ></div>
          </div>
          <div class="strength-text" :class="getStrengthClass()">
            {{ getStrengthText() }}
          </div>
        </div>
        
        <el-form-item>
          <el-button type="primary" @click="handleLogin" :loading="loading" style="width: 100%">登录</el-button>
        </el-form-item>
      </el-form>
      <div class="register-link">
        还没有账号？<a href="/register">立即注册</a>
      </div>
    </div>
  </div>
</template>

<script>
import { authService } from '../services/authService'

export default {
  name: 'LoginView',
  data() {
    return {
      loginForm: {
        username: '',
        email: '',
        password: ''
      },
      loginType: 'username', // 'username' 或 'email'
      passwordStrength: 0, // 0-3，表示密码强度
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9_\u4e00-\u9fa5]{3,10}$/, message: '用户名应为3-10位字母、数字、下划线或中文', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
        ]
      },
      loading: false
    }
  },
  methods: {
    // 检查密码强度
    checkPasswordStrength() {
      const password = this.loginForm.password
      if (!password) {
        this.passwordStrength = 0
        return
      }
      
      let strength = 0
      // 长度检查
      if (password.length >= 8) strength++
      // 包含数字
      if (/\d/.test(password)) strength++
      // 包含字母或特殊字符
      if (/[a-zA-Z]/.test(password) || /[^a-zA-Z0-9]/.test(password)) strength++
      
      this.passwordStrength = strength
    },
    
    // 获取密码强度样式类
    getStrengthClass() {
      switch (this.passwordStrength) {
        case 1: return 'weak'
        case 2: return 'medium'
        case 3: return 'strong'
        default: return ''
      }
    },
    
    // 获取密码强度文本
    getStrengthText() {
      switch (this.passwordStrength) {
        case 1: return '弱 - 建议增加长度和复杂度'
        case 2: return '中 - 可以再增加一些特殊字符'
        case 3: return '强 - 密码安全性良好'
        default: return ''
      }
    },
    
    async handleLogin() {
      // 避免重复提交
      if (this.loading) return;
      
      this.$refs.loginFormRef.validate(async (valid) => {
        if (valid) {
          this.loading = true
          try {
            const credentials = {
              username: this.loginForm[this.loginType], // 根据登录类型使用用户名或邮箱
              password: this.loginForm.password
            }
            console.log('发送登录请求:', credentials)
            const response = await authService.login(credentials)
            
            // 检查响应中是否有错误信息
            if (response && !response.success) {
              this.$message.error(response.message || '登录失败，请检查输入信息')
              console.error('登录失败，响应数据:', response)
            } else {
              // 登录成功 - 增强型状态检查和确认
              console.log('✅ 登录成功，开始状态检查和确认流程')
              console.log('✅ 响应数据:', response)
              
              // 关键修复：等待一小段时间确保localStorage写入完成
              await new Promise(resolve => setTimeout(resolve, 300))
              
              // 执行双重验证确保数据正确存储
              await this.verifyLoginState(response)
            }
          } catch (error) {
            console.error('登录错误详情:', error)
            const errorMessage = error.message || 
                                error.response?.data?.message || 
                                '登录失败，请检查输入信息'
            this.$message.error(errorMessage)
          } finally {
            this.loading = false
          }
        }
      })
    },
    
    // 新增：验证登录状态的专用方法
    async verifyLoginState(originalResponse) {
      try {
        console.log('🔍 开始执行登录状态验证...')
        
        // 第一步：检查localStorage中的原始数据
        const rawToken = localStorage.getItem('token')
        const rawUser = localStorage.getItem('user')
        
        console.log('🔍 验证步骤1 - localStorage检查:')
        console.log('  - Token存在:', !!rawToken)
        console.log('  - User存在:', !!rawUser)
        console.log('  - Token长度:', rawToken ? rawToken.length : 0)
        console.log('  - Token预览:', rawToken ? rawToken.substring(0, 20) + '...' : 'null')
        console.log('  - User数据:', rawUser)
        
        // 第二步：使用authService进行认证状态检查
        const isAuth = authService.isAuthenticated()
        console.log('🔍 验证步骤2 - authService检查结果:', isAuth)
        
        // 第三步：如果数据存在但认证检查失败，尝试修复
        if (rawToken && rawUser && !isAuth) {
          console.log('🔧 数据存在但认证检查失败，尝试修复...')
          
          // 尝试重新触发认证检查
          await new Promise(resolve => setTimeout(resolve, 200))
          const recheckAuth = authService.isAuthenticated()
          
          if (recheckAuth) {
            console.log('✅ 修复成功，重新检查认证通过')
            await this.proceedToHome()
            return
          } else {
            console.error('❌ 修复失败，清除异常数据')
            localStorage.removeItem('token')
            localStorage.removeItem('user')
            this.$message.error('登录数据异常，请重新登录')
            return
          }
        }
        
        // 第四步：根据验证结果决定下一步操作
        if (isAuth && rawToken && rawUser) {
          console.log('✅ 所有验证通过，准备跳转')
          await this.proceedToHome()
        } else {
          console.error('❌ 认证状态异常')
          console.error('❌ 详细诊断:')
          console.error('  - Token存在:', !!rawToken)
          console.error('  - User存在:', !!rawUser)
          console.error('  - authService认证:', isAuth)
          console.error('  - 原始响应:', originalResponse)
          
          this.$message.error('登录状态异常，请重新登录')
        }
        
      } catch (verifyError) {
        console.error('❌ 状态验证过程中出错:', verifyError)
        this.$message.error('登录验证失败，请重试')
      }
    },
    
    // 新增：执行页面跳转的专用方法
    async proceedToHome() {
      try {
        console.log('🏠 执行页面跳转到首页')
        
        // 等待一小段时间让用户看到成功消息
        await new Promise(resolve => setTimeout(resolve, 500))
        
        // 执行跳转
        this.$router.push('/')
        
        console.log('✅ 页面跳转请求已发送')
      } catch (navError) {
        console.error('❌ 页面跳转失败:', navError)
        this.$message.error('页面跳转失败，请手动刷新页面')
      }
    },
  },
  // 如果已登录，直接跳转到首页
  beforeMount() {
    if (authService.isAuthenticated()) {
      this.$router.push('/')
    }
  }
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.login-form {
  width: 400px;
  padding: 30px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.login-form h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #303133;
}

/* 登录方式切换样式 */
.login-type-switch {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

/* 密码强度样式 */
.password-strength {
  margin-bottom: 20px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.strength-label {
  font-size: 12px;
  color: #606266;
  margin-bottom: 5px;
}

.strength-bars {
  display: flex;
  gap: 5px;
  margin-bottom: 5px;
}

.strength-bar {
  flex: 1;
  height: 5px;
  background-color: #e4e7ed;
  border-radius: 3px;
  transition: all 0.3s;
}

.strength-bar.weak {
  background-color: #f56c6c;
}

.strength-bar.medium {
  background-color: #e6a23c;
}

.strength-bar.strong {
  background-color: #67c23a;
}

.strength-text {
  font-size: 12px;
  margin-top: 5px;
}

.strength-text.weak {
  color: #f56c6c;
}

.strength-text.medium {
  color: #e6a23c;
}

.strength-text.strong {
  color: #67c23a;
}

.register-link {
  text-align: center;
  margin-top: 20px;
  color: #909399;
}

.register-link a {
  color: #409eff;
  text-decoration: none;
}

.register-link a:hover {
  text-decoration: underline;
}
</style>